import React from "react";
import {colorRed,colorBlue,titleSize,CommonListBox} from './common';
import styled from "styled-components";
//编写组件的样式：基于CSS-IN-JS思想中的styled-components插件
const MenuBox = styled.div`
    background-color: ${colorBlue};
    width: 400px;
    .title{
        font-size: ${titleSize}px;
        line-height: 40px;
        &:hover{
            color:${colorRed};
        }
    }
`
class Menu extends React.Component {
    render() {
        return <MenuBox>
            <h2 className="title">产品分类列表</h2>
            <CommonListBox>
                <li>手机</li>
                <li>电脑</li>
                <li>家电</li>
            </CommonListBox>
        </MenuBox>
    }
}

export default Menu;